<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
  <script src="./../plugins/svg.min.js"></script>
  <script src="./../plugins/svg.easing.min.js"></script>
  <script src="./../plugins/svg.shapes.js"></script>
  <script src="./../utils/utils.js"></script>
</head>
<body>
</body>
<script>
  var star;
  var draw = SVG().addTo('body').size(800, 600)
  const param = {
    inner:  50,
    outer:  100,
    spikes: 5,
    edges:  10,
    radius: 100
  }

  function make() {
    const color = SVG.Color.random();
    star = draw.polygon().star(param).attr({fill:color});
    star.move(400, 200);
  }

  make();

  var bx=1,by=1;
  function render() {

    let x = star.x();
    let y = star.y();
    x = x + bx*Math.random()*10;
    y = y + by*Math.random()*10;
    if (x < 100) {x = 100; bx=1;}
    else if (x > 650) {x = 650; bx=-1}
    if (y < 100) {y = 100; by=1}
    else if (y > 400) {y=400; by=-1;}

    const color = SVG.Color.random();
    const starPoints = getStarPoints();
    star.animate({
      duration: 300,
      delay: 0,
      when: 'now',
      swing: true,
      times: 1,
      wait: 0
    }).ease('sineInOut').plot(starPoints).move(x, y) //sineInOut elastic
  }

  var loopCnt = 0;
  (function animloop() {
    if (0===loopCnt%13) { // one 16ms.
      render();
    }
    loopCnt++;
    if (loopCnt > 10000) loopCnt = 0;
    window.requestAnimationFrame(animloop);
  })();

</script>
</html>